<template>
  <view class="me">
    <view class="top-box">
      <view class="user-box" @click="toUserInfoSetting()">
        <i v-if="!userIcon" class="user-icon iconfont icon-userCenter" />
        <image v-else class="user-icon" :src="userIcon" mode="aspectFill"></image>
        <view class="user-info">
          <view class="user-name">{{ userNameShow }}</view>
          <view class="number-box">{{ userCode }}</view>
        </view>
      </view>
    </view>
    <view class="operate-icon">
      <view class="icon-item">
        <view class="item-content" @click="scanQR">
          <image class="item-img" src="@/static/image/operate-icon-qr.png"></image>
          <view class="item-text">扫一扫</view>
        </view>
      </view>
      <view class="icon-item">
        <view class="item-content">
          <image class="item-img" src="@/static/image/operate-icon-gzh.png"></image>
          <view class="item-text">公众号</view>
        </view>
      </view>
      <view class="icon-item">
        <view class="item-content">
          <image class="item-img" src="@/static/image/operate-icon-kf.png"></image>
          <view class="item-text">客服</view>
        </view>
      </view>
    </view>
    <view class="operate-list">
      <view class="list-item">
        <view class="item-icon iconfont icon-folder"></view>
        <view class="item-label">看板项目</view>
        <view class="item-operate iconfont icon-arrow-right"></view>
      </view>
      <view class="list-item">
        <view class="item-icon iconfont icon-heart"></view>
        <view class="item-label">我的收藏</view>
        <view class="item-operate iconfont icon-arrow-right"></view>
      </view>
      <view class="list-item" @click="toDebug()">
        <view class="item-icon iconfont icon-setting-line"></view>
        <view class="item-label">移动网关</view>
        <view class="item-operate iconfont icon-arrow-right"></view>
      </view>
      <view class="list-item">
        <view class="item-icon iconfont icon-notice-line"></view>
        <view class="item-label">消息通知</view>
        <view class="item-operate iconfont icon-arrow-right"></view>
      </view>
      <view class="list-item" @click="toChangePassword()">
        <view class="item-icon iconfont icon-lock-line"></view>
        <view class="item-label">密码修改</view>
        <view class="item-operate iconfont icon-arrow-right"></view>
      </view>
      <view class="list-item">
        <view class="item-icon iconfont icon-pc"></view>
        <view class="item-label">PC版本</view>
        <view class="item-operate link">复制链接</view>
      </view>
      <view class="list-item">
        <view class="item-icon iconfont icon-edit"></view>
        <view class="item-label">优化建议</view>
        <view class="item-operate iconfont icon-arrow-right"></view>
      </view>
      <view class="list-item">
        <view class="item-icon iconfont icon-policy"></view>
        <view class="item-label">隐私协议</view>
        <view class="item-operate iconfont icon-arrow-right"></view>
      </view>
    </view>
  </view>
</template>

<script>
import { USER_ROLE } from '@/constant/index.js'
import { getImagePath, formatPhone, formatUserCode, getParamByQr } from '@/utils/index.js'
export default {
  data() {
    return {
      isAdmin: false,
      canEdit: false,
      userName: '',
      userNameShow: '',
      phoneNumber: '',
      phoneNumberShow: '',
      userCode: '',
      userIcon: ''
    }
  },
  onShow() {
    this.getUserInfo()
  },
  onPullDownRefresh() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      const self = this
      uni.request({
        url: '/user/get',
        success(result) {
          if (result.data.success && result.data.data) {
            const userInfo = result.data.data
            self.isAdmin = userInfo.role === USER_ROLE.ADMIN
            self.canEdit = [USER_ROLE.ADMIN, USER_ROLE.AGENT].includes(userInfo.role)
            self.userName = userInfo.name || ''
            self.userNameShow = self.userName || '请设置昵称'
            self.phoneNumber = userInfo.phone || ''
            self.phoneNumberShow = formatPhone(self.phoneNumber)
            self.userCode = formatUserCode(userInfo.id)
            self.userIcon = getImagePath(userInfo.photo)
            self.$forceUpdate()
            uni.setStorage({
              key: 'userInfo',
              data: JSON.stringify(userInfo)
            })
          }
        },
        complete() {
          uni.stopPullDownRefresh()
        }
      })
    },
    toUserInfoSetting() {
      uni.navigateTo({
        url: '/pages/me/edit-info/edit-info'
      })
    },
    scanQR() {
      const self = this
      uni.scanCode({
        scanType: ['qrCode'],
        success(res) {
          console.log(res)
          const qrGatewayId = getParamByQr(res.result, 'gw')
          const qrVideoId = getParamByQr(res.result, 'v')
          if (qrGatewayId.length > 3) {
            uni.reLaunch({
              url: `/pages/index/index/index?gatewayId=${qrGatewayId}`
            })
          } else if (qrVideoId) {
            uni.reLaunch({
              url: `/pages/index/index/index?videoId=${qrVideoId}`
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: '无效的二维码'
            })
          }
        },
        fail(e) {
          if (!e.errMsg?.includes('cancel')) {
            uni.showToast({
              icon: 'none',
              title: '无效的二维码'
            })
          }
        }
      });
    },
    toDebug() {
      uni.navigateTo({
        url: '/debug/pages/scan/scan'
      })
    },
    toChangePassword() {
      uni.navigateTo({
        url: '/pages/me/change-password/change-password'
      })
    },
    toNoPermission() {
      uni.navigateTo({
        url: '/pages/entrance/no-permission/no-permission'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.me {
  padding: 0 30rpx;
}
.top-box {
  position: relative;
  padding-top: 30rpx;
  margin-bottom: 50rpx;
  .user-box {
    position: relative;
    z-index: 2;
    padding-left: 120rpx;
    .user-icon {
      position: absolute;
      left: 0;
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      font-size: 100rpx;
      color: $primary;
    }
    .user-info {
      .user-name {
        color: $text-main;
        font-size: $font-size-8;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .number-box {
        margin-top: 10rpx;
        color: $text-base;
        font-size: $font-size-2;
      }
    }
  }
}
.operate-icon {
  position: relative;
  z-index: 2;
  background-color: $white;
  border-radius: 10rpx;
  display: flex;
  .icon-item {
    position: relative;
    height: 150rpx;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 6rpx;
    &:first-child {
      &:before {
        content: none;
      }
    }
    &:before  {
      content: '';
      position: absolute;
      display: block;
      top: 45rpx;
      left: 0;
      width: 2rpx;
      height: 60rpx;
      background-color: $border-base;
    }
  }
  .item-content {
    text-align: center;
    .item-img {
      width: 48rpx;
      height: 48rpx;
    }
    .item-text {
      margin-top: 4rpx;
      font-size: $font-size-2;
    }
  }
}
.operate-list {
  margin-top: 30rpx;
  background-color: $white;
  border-radius: 10rpx;
  .list-item {
    position: relative;
    height: 90rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 80rpx;
    .item-icon {
      position: absolute;
      top: 26rpx;
      left: 30rpx;
      color: $primary;
      font-size: 36rpx;
    }
    .item-label {
      font-size: $font-size-3;
    }
    .item-operate {
      font-size: $font-size-2;
      &.link {
        color: $primary;
      }
    }
  }
}

</style>
